window.onload = function(){
    (function () {
        /**
         * 全选框
         * 
         */
        function checkboxAll() {
            let checkBoxAllEle = document.querySelector('.checkbox-all');
            let checkBoxArrayEle = document.querySelectorAll('.checkbox-item');
    
            checkBoxAllEle.onclick = function () {
                for (let index = 0; index < checkBoxArrayEle.length; index++) {
                    const element = checkBoxArrayEle[index];
                    if (checkBoxAllEle.checked == true) {
                        element.checked = true;
                    } else {
                        element.checked = false;
                    }
                }
            }
        }
    
    
        /**
         *  分析:
         *   只有一个复选框未选中，全选框设为未选中；复选框全被选中全选框设为选中。
         */
        function checkBoxSingle() {
            let checkBoxAllEle = document.querySelector('.checkbox-all');
            let checkBoxArrayEle = document.querySelectorAll('.checkbox-item');
    
            let isCheck = true; // 全选框是否选中
            for (let index = 0; index < checkBoxArrayEle.length; index++) {
                const element = checkBoxArrayEle[index];
                if (element.checked == false) {
                    isCheck = false;
                    break;
                }
            }
    
            if (isCheck) {
                checkBoxAllEle.checked = true;
            } else {
                checkBoxAllEle.checked = false;
            }
    
        }
    
        /**
         * 单选按钮实现方式一
         * 直接操作单选框事件
         */
        function singleClick() {
            let checkBoxArrayEle = document.querySelectorAll('.checkbox-item');
            for (let index = 0; index < checkBoxArrayEle.length; index++) {
                const element = checkBoxArrayEle[index];
                element.onclick = function () {
                    checkBoxSingle();
                }
            }
        }
    
    
        /**
         * 单选按钮实现方式二
         * 事件代理实现
         */
        function singleOneClick() {
            let tableEle = document.querySelector('#departmentID');
            tableEle.onclick = function () {
                let target = event.target || event.srcElement;
                if (target.nodeName == 'INPUT' && target.getAttribute('class') == 'checkbox-item') {
                    checkBoxSingle();
                }
            }
        }
        checkboxAll();
        // singleClick();
        singleOneClick();
    })()
}